<template>
  <div>
    <el-input v-model.trim="keywords" style="width: 200px" clearable placeholder="请输入项目简称查询"></el-input>
    <el-date-picker v-model="month" type="month" placeholder="选择月" :clearable="false" value-format="yyyy-MM"
      @change="changeMonth">
    </el-date-picker>
    <el-select v-model="projectType" clearable placeholder="请选择项目类型">
      <el-option v-for="item in projectTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
    </el-select>
    <el-button type="primary" @click="search">搜索</el-button>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%;margin-top: 20px;" ref="planTable">
      <el-table-column type="index" align="center" label="序号" width="100">
      </el-table-column>
      <el-table-column prop="fullName" align="center" label="项目全称">
      </el-table-column>
      <el-table-column prop="name" align="center" label="项目简称">
      </el-table-column>
      <el-table-column align="center" label="项目类型">
        <template slot-scope="scope">
          {{
            scope.row.projectType == 1
            ? "管理类"
            : scope.row.projectType == 2
              ? "自研产品"
              : scope.row.projectType == 3
                ? "委托开发"
                : scope.row.projectType == 4
                  ? "市场"
                  : ""
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="本月工时">
        <template slot-scope="scope">
          <div v-if="scope.row.monthHour != null">
            {{ scope.row.monthHour}}
          </div>
          <div v-else>0</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="总工时">
        <template slot-scope="scope">
          <div v-if="scope.row.manhour != null">
            {{ scope.row.manhour}}
          </div>
          <div v-else>0</div>
        </template>
      </el-table-column>
      <el-table-column prop="success" align="center" label="操作" fixed="right" width="200">
        <template slot-scope="scope">
          <el-button type="primary" plain size="mini" @click="
          manhourClink(
            scope.row.id,
            month,
            scope.row.name,
            scope.row.fullName
          )
            ">查看工时</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination style="text-align: right; margin-top: 20px" background @size-change="handleSizeChange"
      @current-change="handleChangePage" :current-page="pn" :page-sizes="[5, 10, 15, 20, 30, 40]" :page-size="ps"
      layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>

    <div>
      <LineChart></LineChart>
      <PieChart></PieChart>
    </div>
  </div>
</template>

<script>
import { selectProjectListByReq } from "@/service/financeApi.js"; //接口
import LineChart from "./component/LineChart.vue";
import PieChart from "./component/PieChart.vue";
export default {
  components: {
    LineChart,
    PieChart,
  },
  data() {
    return {
      flag: true,
      type: 0,
      period: "",
      fullName: "",
      name: "",
      projectTypeName: "",
      projectType: "",
      manhour: "",
      monthHour: "",
      month: "",
      ProjectList: [],
      tableData: [],
      keywords: "",
      projectTypeList: [
        {
          value: 1,
          label: "管理类",
        },
        {
          value: 2,
          label: "自研产品",
        },
        {
          value: 3,
          label: "委托开发",
        },
        {
          value: 4,
          label: "市场",
        },
      ], //项目类型：1、管理类 2、自研产品 3、委托开发 4、市场
      LineList: [
        { UserScore: 13, Name: "11-23" },
        { UserScore: 15, Name: "11-24" },
        { UserScore: 19, Name: "11-25" },
        { UserScore: 26, Name: "11-26" },
        { UserScore: 18, Name: "11-27" },
        { UserScore: 15, Name: "11-28" },
        { UserScore: 14, Name: "11-29" },
      ],
      defaulteParams: {
        keyword: this.keywords,
        period: this.month,
      },
      id: "",
      pn: 1,
      ps: 10,
      total: 0,
      form: {
        remarks: "",
      },
      checked: false,
      title: "",
      formLabelWidth: "150px",
      inputDataNum: 0,
      category: "",
      rules: {},
      projects: [],
      tab: 0,
      pickerOptions: {
        disabledDate(time) {
          console.log("time=", time);
          return time.getTime() > Date.now() - 24 * 3600 * 1000;
        },
      },
    };
  },

  created() {
    this.getdatetime();
    this.search();
  },

  methods: {
    //查询
    getTableList() {
      let data = {
        pn: this.pn,
        ps: this.ps,
        keyword: this.keywords,
        id: this.plateId,
        period: this.month,
        projectType: this.projectType,
      };
      selectProjectListByReq(data).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    changeMonth() {
      this.getTableList();
    },
    getdatetime() {
      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      month = month < 10 ? "0" + month : month;
      this.month = year + "-" + month;
    },
    // 搜索
    search() {
      this.pn = 1;
      this.getTableList();
    },
    //页码
    handleChangePage(index) {
      this.pn = index;
      this.getTableList();
    },
    handleSizeChange(val) {
      this.ps = val;
      this.getTableList();
    },
    //查看工时
    manhourClink(id, period, name, fullName) {
      let a = {
        id: id,
        period: period,
        projectNamess: name,
        projectNames: fullName,
      };
      // console.log(a);
      this.$emit("goManHour", a);
    },
  },
};
</script>
